<template>
    <div class="aside-page">
        <el-menu router :default-active="activeIndex" 
            background-color="var(--menu-aside-bg-color)"
            text-color="var(--menu-aside-text-color)" 
            active-text-color="var(--menu-aside-active-text-color)">
            <el-menu-item index="/home">
                <el-icon>
                    <component is="HomeFilled" />
                </el-icon>
                <span>首页</span>
            </el-menu-item>
            <menu-component :menu-list="menuList" />
        </el-menu>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, watch } from 'vue';
import router from '@/router/index';
import userStore from '@/store/user';
import MenuComponent, { type MenuItem } from './componts/MenuComponent.vue'; // 引入递归组件
// 示例：从接口或 vuex 获取菜单数据
const menuList = ref<MenuItem[]>([]);

const activeIndex = ref('/home');

onMounted(() => {
    menuList.value = userStore.state.menus;
    activeIndex.value = router.currentRoute.value.path;
});

watch(
    () => userStore.state.menus,
    (newMenus) => {
        if (newMenus && newMenus.length > 0) {
            menuList.value = newMenus;
        }
    },
    { deep: true, immediate: true }
);
</script>
<style lang="scss" scoped>
.aside-page {
    height: 100%;

    .el-menu {
        height: 100%;

        .el-menu-item:hover{
            background-color: hsl(from var(--menu-aside-bg-color) h s calc(l * 0.8)) !important;;
        }
    }
}
</style>